<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/echarts-gl.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	var dataAll = null;
	var x = ['列6', '列5', '列4', '列3', '列2', '列1'];
	var y = ['行1', '行2', '行3', '行4',  '行5'];
	
	//测试
	var data = [[6,1,16.7],[6,5,16.8],[4,5,17.5],[3,4,16.8],[0,0,16.8],[2,5,17.5],[0,3,17.1],[2,3,17.1],[3,3,16.5],[4,1,17.1],[0,4,17.3],[1,5,16.7],[0,2,17.1],[1,0,17.8],[0,5,17.5],[1,4,17.2],[1,2,16.7],[1,3,17.1],[2,1,17.2],[5,2,17.6],[5,3,17.5],[1,1,16.8],[2,2,17.1],[3,1,17],[3,5,17],[6,2,17.1],[6,3,16.7],[5,4,17.6],[4,3,17.3],[2,4,17.3],[3,2,16.8],[5,1,17.3],[5,0,17.5],[2,0,16.8],[0,1,17.3],[6,4,17],[4,0,17],[3,0,16.7],[4,2,17.3],[6,0,16.6],[5,5,17.7],[4,4,17.3],[6,2,17.5],[6,5,17.1],[1,1,17.1],[4,4,17.5],[5,3,17.6],[1,5,16.8],[2,3,16.7],[4,0,17],[1,2,16.8],[0,2,17.3],[0,1,17.3],[6,3,16.7],[0,5,17.6],[3,2,16.8],[3,5,17],[6,4,16.7],[0,3,17.3],[5,0,17.5],[5,1,17.6],[3,4,17],[1,0,16.5],[6,1,16.7],[2,1,17],[1,3,16.6],[4,5,17.1],[2,5,17.6],[5,2,17.6],[4,3,17.5],[2,2,16.8],[3,3,16.8],[3,1,16.8],[4,1,17.1],[2,4,17],[5,5,17.3],[3,0,17.2],[1,4,16.8],[5,4,17.2],[4,2,17.3],[6,0,16.7],[0,4,17.3],[2,0,17.3],[0,0,17.5],[4,1,17.1],[4,4,17.2],[5,3,17.3],[6,1,17.2],[6,2,17.1],[4,3,17.2],[1,3,16.1],[6,5,17.2],[2,2,17.1],[1,4,16.7],[6,3,17.1],[0,3,17.6],[6,4,16.7],[4,0,16.7],[1,2,17.1],[5,1,17.6],[3,1,16.8],[3,4,16.7],[0,2,17.3],[4,2,17],[3,2,16.8],[5,5,17.3],[2,0,16.7],[5,2,17.7],[4,5,17.2],[6,0,17],[3,0,17.5],[1,1,16.6],[1,0,17],[0,1,17.1],[0,0,17.2],[3,3,16.7],[2,1,17.1],[3,5,17.3],[0,4,17.7],[2,4,17],[1,5,16.6],[2,3,17],[5,4,17.8],[0,5,17.3],[2,5,17.3],[5,0,17.1],[0,5,17.6],[2,3,17.2],[2,0,17.2],[5,1,17.1],[4,5,17.6],[1,5,16.6],[5,5,17.6],[5,4,17],[3,5,16.8],[5,3,17.2],[2,1,17.1],[2,5,17.2],[3,0,17],[4,3,17.2],[6,0,16.8],[0,0,17.3],[2,2,17],[1,1,16.6],[4,1,17.1],[0,3,17.2],[6,4,17.3],[1,4,17],[1,3,17.3],[1,0,16.7],[6,1,17],[5,0,17.5],[3,4,16.8],[6,3,17],[4,0,17],[3,2,16.7],[1,2,16.8],[3,3,16.7],[6,2,17.2],[0,2,17.2],[2,4,17],[3,1,17],[4,2,17.1],[6,5,16.7],[4,4,17.2],[5,2,17.5],[0,4,17.5],[0,1,17.5]];
	
//单层柱状图
var option = {
	    visualMap: {
	        min:2,
	        max: 40,
	        inRange: {
	        	color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
	        }
	    },
	    xAxis3D: {
	        type: 'category',
	        data: x
	    },
	    yAxis3D: {
	        type: 'category',
	        data: y
	    },
	    zAxis3D: {
	        type: 'value',
	        name:'温度℃'
	    },
	    grid3D: {
	        boxWidth: 180,
	        boxDepth: 80,
	        light: {
	            main: {
	                intensity: 1.2,
	                shadow: true
	            },
	            ambient: {
	                intensity: 0.3
	            }
	        },
	       environment:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	            offset: 0, color: '#00aaff' // 天空颜色
	        }, 
	        {
	            offset: 0.7, color: '#998866' // 地面颜色
	        },
	        {
	            offset: 1, color: '#998866' // 地面颜色
	        }], false)
	    },
	    series: [{
	        type: 'bar3D',
	        data: data,
	        shading: 'lambert',
	        label: {
	            show:true,
	            textStyle: {
	                fontSize: 16,
	                borderWidth: 1
	            }
	        },
	        emphasis: {
	            label: {
	                textStyle: {
	                    fontSize: 20,
	                    color: '#900'
	                }
	            },
	            itemStyle: {
	                color: '#900'
	            }
	        }
	    }]
	};
	
	function getValue(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) return unescape(r[2]);  
	    return null;  
	};
	
	var depotId = getValue("depotId");
	var batchId = getValue("batchId");

	//console.log("===depotId=="+depotId);
	
	if(null == depotId){
		alert("没有获取到仓库信息和数据！");
		showData(1);
	}else{
		$.ajax({
	        type: "GET",
	        url: "../../page/web/3dGrainInfo",
	        data: {depotId:depotId,batchId:batchId},
	        dataType: "json",
	        success: function(result){
	        	dataAll = result;
	        	showData(1);
	        },
	        error:function(){
	        	alert("3D模型数据获取出错，请重新尝试！");
	        }
	    });
	}
	
	/**显示数据num=层**/
	function showData(num){
		//console.info("----3d1---"+num);
		var result = new Array();
		$.each(dataAll,function(index,value){
			if(num == value.fz){
				result.push({name:"正常",value:[value.x,value.y,value.temp]});
			}
		});
		option.series[0].data = result;
		myChart.setOption(option);
	};
	
</script>
</body>
</html>